共计 1795 个字符，预计需要花费 5 分钟才能阅读完成。
一.hand 内常用标签
1.title : 定义网页标题
<title> 网页标题 </title>
2.style : 定义 CSS 样式
<style>
[一堆 CSS 代码]
</style>
3.script : 定义 js 动态效果
<script>
[一堆 js 代码]
</script>
4.link : 引入外部 CSS 文件或网站图标 ico
<link rel="stylesheet" href="test.css">
5.meta 标签
\元素可提供有关页面的元信息(mata-information), 针对搜索引擎和更新频度的描述和关键词
元数据不会显示在客户端, 但是会被浏览器解析
- charset 属性
python
<meta charset="UTF-8"> # 指定文档的编码类型
- http-equiv 属性
python
<meta http-equiv="refresh" content="3,http://www.baidu.com"> # 3 秒后跳转指定网页
<meta http-equiv="refresh" content="3"> # 3 秒后跳转当前所在的网页
- name 属性
python
<meta name="keywords" content="网上购物, 京东, 支付"> # 关键字, 便于搜索引擎查找分类以及 seo 优化
二.body 内常用的标签
1.h : 标题标签
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>分六级标题
<h1> 一级标题 </h1>
<h2> 二级标题 </h2>
<h3> 三级标题 </h3>
<h4> 四级标题 </h4>
<h5> 五级标题 </h5>
<h6> 六级标题 </h6> # 下面效果展示
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
2.p : 段落标签
- 每个段落都是通过
<p>标签进行标记的, 有换行效果
<p> 所见即所得 </p>
<p> 拿来即可用 </p>
3.br : 换行标签
- 相当于在文本中敲了一个回车
4.b : 加粗标签
5.i : 倾斜标签
6.u : 下划线标签
7.s : 删除线标签
8.hr : 分隔线标签
- 演示
<!DOCTYPE html>
<html>
<head>
<title> 常用标签演示 </title>
</head>
<body>
<h3> 我是三级标题 </h3>
<!-- 换行标签 br -->
<br>
<b> 我是加粗标签 </b>
<i> 我是倾斜标签 </i>
<!-- 分割线标签 hr -->
<hr>
<u> 我是下划线标签 </u>
<s> 我是删除线标签 </s>
</body>
</html>
9.div 标签与 span 标签
- div (division 分隔) : 块级标签
- span (范围) : 行内标签
上述的两个标签是在构造页面初期最常使用的, 页面的布局一般先用 div 和 span 占位之后再去调整样式, 尤其是 div 使用非常的频繁
div 你可以把它看成是一块区域, 也就意味着用 div 来提前规定所有的区域之后往该区域内部填写内容即可, 而普通的文本先用 span 标签
三.a : 超链接标签
a 标签主要用来设置超文本链接，超链接可以是任意字符，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手
- a 标签的默认样式
1. 未访问过的链接显示为蓝色字体并带有下划线
2. 访问过的链接显示为紫色并带上下划线
3. 点击链接时，链接显示为红色并带上下划线
- 常用参数解释
<a href="http://www.baidu.com" target="_blank" title=" 百度一下 " >
# herf : 定义连接的目标 URL(可以是网址, 本地路径, 邮件地址, 锚点, 空连接 #)
# target : 定义连接的目标窗口
# _blank : 新窗口
# _self : 当前窗口
# title : 定义悬浮链接时的提示信息
- 设置锚点
<h2 id="section1"> 锚点 1 位置 </h2>
<p> 文章内容 </p>
<p> 文章内容 </p>
<p> 文章内容 </p>
<p> 文章内容 </p>
<a href="#section1"> 跳到锚点一 </a>
# 相当于一个定位, 可以从一个位置切到定位点, 网页中回到顶部就是这样实现的
四.img : 图片标签
- 标签语法
<img src="" alt="">
- 参数解释
# src : 图片的路径, 可以是本地的也可以是网上的(本地尽量使用相对路径)
# alt : 图片加载失败时的描述信息
# title : 鼠标悬浮图片时的提示信息
# height : 高度
# width : 宽度, 宽度与高度尽量值设置一个, 让另一个自适应, 否则会拉扯的不美观
五.
正文完
yanmkxx
很牛，谢谢你写的文章
wszzss
请帮我修改下链接：微生之最，前面帮我加个www
song1
搜索
puock
(❁´◡`❁)(❁´◡`❁)(❁´◡`❁)
zhaochong
😄
xing1
😶🌫️